<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>任务首页 </title>

    <link rel="stylesheet" th:href="@{/static/iview/iview.css}">
    <script th:src="@{/static/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
	<script th:src="@{/static/libs/vue.min.js}" type="text/javascript"></script>
	<script th:src="@{/static/layer/layer.js}" type="text/javascript"></script>
   <script th:src="@{/static/iview/iview.min.js}" type="text/javascript"></script>
	<script th:src="@{/static/common.js}" type="text/javascript"></script>
    <style type="text/css">
	[v-cloak] {
			  display: none;
			}
	</style>
</head>
<body>
<div id="app" v-cloak>
        <div style="margin-bottom: 6px;margin: 30px">
			<i-input v-model="content" placeholder="文件版本、文件名"  style="width: 200px"></i-input>
		    <i-select  v-model="updown"  style="width: 70px" @on-change="changupdownlist"  placeholder="方式">
		              <i-option v-for="item in updownlist"  :value="item.id"  :key="item.value">{{item.value}} </i-option>
		     </i-select> 
		     <i-select  v-model="transtype"  style="width: 150px" @on-change="changtranstypelist"  placeholder="交易类型" >
		              <i-option v-for="item in transtypelist"  :value="item.id"  :key="item.value">{{item.id}} - {{item.value}} </i-option>
		     </i-select> 
		      <i-select  v-model="response"  style="width: 120px" @on-change="changresponselist"  placeholder="响应状态">
		              <i-option v-for="item in responselist"  :value="item.id"  :key="item.value">{{item.id}} - {{item.value}} </i-option>
		     </i-select> 
		     <date-picker type="datetime" v-model="startTime" placeholder="请选择开始时间" :options="startTimeOption" @on-change="onStartTimeChange"   style="width: 153px" ></date-picker>
		    -
		     <date-picker type="datetime" v-model="endTime" placeholder="请选择结束时间" :options="endTimeOption" @on-change="onEndTimeChange"   style="width: 153px" ></date-picker>
			<i-button type="primary" @click="search()" icon="ios-search">搜索</i-button>
			<i-button type="primary" @click="empty()" icon="ios-close-empty">清空</i-button>
		</div>
		<div style="margin-bottom: 6px;margin: 30px">
			<template> 
				<i-table border :content="self" :columns="tableTitle" :data="datalist"></i-table>
			 	<br>
<!-- 			 	<Page :total="dataCount" :page-size="pageSize" show-total @on-change="changepage" @on-page-size-change="changePageSize"></Page> -->
			 	<!--分页功能-->
				<Page :current="pageNo" :total="dataCount" :page-size="pageSize"  @on-change="changepage"  @on-page-size-change="changePageSize"  show-elevator show-sizer show-total ></Page>
				 
			</template>
		</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : '#app',
	data : {
		content : '',
		pageNo : 1,
		pageSize : 10,// 每页显示多少条
		dataCount:"", // 总数据的条目
		datalist: [], //接口获取的总数据
		historyData:'',//展示的数据 
		transtype:'',
	    transtypelist:[],
		updown:'',
		updownlist:[{"id":"","value":"请选择"},{"id":"0","value":"上传"},{"id":"1","value":"下载"}], 
		response:'',
		responselist:[
			{"id":"","value":"请选择"},
			{"id":"200","value":"成功"},
			{"id":"707","value":"重复数据上传"},
			{"id":"716","value":"响应失败"},
		/* 	{"id":"9xx","value":"失败"},
			{"id":"10xx","value":"失败"}, */
			{"id":"408","value":"请求超时"},
			{"id":"999","value":"未知错误"},
			{"id":"951","value":"文件 md5 校验失败"},
			{"id":"952","value":"效验错误"},
			{"id":"953","value":"请求文件为空"},
			{"id":"954","value":"请求文件名与上传文件文件名不一致"},
			{"id":"1003","value":"格式正确内容错误"},
			{"id":"1004","value":"重复交易"}
			],
		startTime: '',
        endTime: '',
        startTimeOption: {},
        endTimeOption: {},
		tableTitle:[ 
		{
				   title : "编号",
				   type: 'index',
				   align: 'center',
		            width: 70
		 },
		{
			key : "fileVersion",
			title : "文件版本",
			width : 155
		}, {
			key : "transTypeCode",
			title : "交易类型",
			width : 90,
			render : function(h, params) {
				var text =params.row.transTypeCode;
				if(params.row.transTypeCode == 1){
					text =" - 原始交易①";
				}else if(params.row.transTypeCode == 2){
					text =" - 刷卡交易";
				}else if(params.row.transTypeCode == 3){
					text =" - 原始交易②";
				}else if(params.row.transTypeCode == 4){
					text =" - 原始交易③";
				}else if(params.row.transTypeCode == 5){
					text =" - 原始交易④";
				}else if(params.row.transTypeCode == 12 || params.row.transTypeCode == 13){
					text =" - 其他交易";
				}else if(params.row.transTypeCode == 14){
					text =" - 冲正交易";
				}else if(params.row.transTypeCode == 10){
					text =" - 省域拆分 - ETC";
				}else if(params.row.transTypeCode == 11){
					text =" - 省域拆分 - 现金";
				}else if(params.row.transTypeCode == 6){
					text =" - 记账";
				}else if(params.row.transTypeCode == 7){
					text =" - 争议处理结果";
				}else if(params.row.transTypeCode == 8){
					text =" - 清分结算结果";
				}else if(params.row.transTypeCode == 9){
					text =" - 清分结算结果（非ETC）";
				}else if(params.row.transTypeCode == 14){
					text =" - 其他冲正交易";
				}else if(params.row.transTypeCode == 15){
					text =" - 交易退费消息";
				}else if(params.row.transTypeCode == 16){
					text =" - 交易补交消息";
				}else if(params.row.transTypeCode == 17){
					text =" - 移动支付长款";
				}else if(params.row.transTypeCode == 18){
					text =" - 清分结算结果（退费补交）";
				}else if(params.row.transTypeCode == 19){
					text =" - 移动支付交易争议";
				}else if(params.row.transTypeCode == 31){
					text =" - 跨省刷卡交易";
				}else if(params.row.transTypeCode == 32){
					text =" - 跨省其他交易";
				}else if(params.row.transTypeCode == 33){
					text =" - 省内门架交易";
				}else if(params.row.transTypeCode == 34){
					text =" - 省内刷卡交易";
				}else if(params.row.transTypeCode == 35){
					text =" - 省内其他交易";
				}
				return h('div',params.row.transTypeCode + text);
			}
		}, /* {
			key : "reqInfo",
			title : "请求内容",
			render : function(h, params) {
				var text = "（数据过大不显示）"
				if(params.row.fileUpdown == 1){
						text = params.row.reqInfo;
				}
			    return h('div',text);
			}
		},  */
		{
			key : "fileName",
			title : "上传请求|下载响应(RES_)文件"
		/* 	render : function(h, params) {
				return h('a',{attrs:{href: "/monitor/downLoadFile?"+window.btoa("id="+params.row.fileVersion+"&type=file"),target: '_black'}},params.row.fileName);
				/*  return h('a',{
					 attrs:{href: "/monitor/downLoadFile?"+window.btoa("filePath="+params.row.filePath),target: '_black'},
				     domProps: {title: params.row.fileName }
				 },params.row.fileName); 
			} */
		}, 
		{
			key : "fileUpdown",
			title : "方式",
			width : 80,
			render : function(h, params) {
				var text = "上传"
				if(params.row.fileUpdown == 1){
					text = "下载"
				}
				return h('div',text);
			}
		}, 
		{
			key : "count",
			title : "明细(条)",
			width : 80
		}, 
		{
			key : "reqTime",
			title : "请求时间",
			width : 150,
			render : function(h, params) {
				var text = "";
				if(params.row.reqTime !=null){
					 text =  formatDate(new Date(params.row.reqTime),'yyyy-MM-dd hh:mm:ss') ;
				}
				return h('div',text);
			}
		}, 
		 {
			key : "resTime",
			title : "响应时间",
			width : 150,
			render : function(h, params) {
				var timer = '------------------';
				if(params.row.resTime !=null){
					timer = formatDate(new Date(params.row.resTime),'yyyy-MM-dd hh:mm:ss');
				}
			    return h('div',timer);
			}
		}, 
		{
			key : "resResult",
			title : "响应状态",
			width : 100,
			render : function(h, params) {
				var text = "失败"
				if(params.row.resResult == 200){
					text = "成功"
				}
				return h('div',text+" [ "+params.row.resResult +" ] ");
			}
		}, 
		{
			key : "resInfo",
			title : "响应信息",
			render : function(h, params) {
					if( params.row.resInfo !=null){
						 return h('div', [
							   h('a',{on:{click: (e) =>{
								   var el = e.currentTarget;
								   var  first = el.nextElementSibling;		
								   var second = el.nextElementSibling.nextElementSibling;   
					        	   if(first.style.display == 'none'){
					        		   first.style.display = "inline-block";
					        		   el.innerText = '收缩';
						        	   el.innerHTML= '收缩';
					        	   }else{
					        		   first.style.display = "none";
					        		   el.innerText = '展开';
					        		   el.innerHTML= '展开';
					        	   }
					        	   
					        	   //缩略图
					        	   if(second.style.display == 'none'){
					        		   second.style.display = "inline-block";
					        		   el.innerText = '展开';
					        		   el.innerHTML= '展开';
					        	   }else{
					        		   second.style.display = "none";
					        		   el.innerText = '收缩';
					        		   el.innerHTML= '收缩';
					        		
					        	   }
					        }}},"展开"),
							 //隐藏起来
							 h('span', { style: { display: 'none' },attrs:{"ref": "shows"}, },params.row.resInfo),
							 //显示部分
						     h('span', {
						        	 slot: 'content',
						            style: {
					                    display: 'inline-block',
					                    width: params.column._width*0.9+'px',
					                    overflow: 'hidden',
					                    textOverflow: 'ellipsis',
					                    whiteSpace: 'nowrap'
					                } 
						        },params.row.resInfo)
						     
						    ]);
					}else{
						if(params.row.resResult !='' && params.row.resTime !=null){
							return h('div','[略]');
						}else{
							return h('div','响应失败无响应)');
						}
						
					}
				
				
			
				/*  return h('div', [
				        h('span', {
				            style: {
			                    display: 'inline-block',
			                    width: params.column._width*0.9+'px', 
			                    overflow: 'hidden',
			                    textOverflow: 'ellipsis',
			                    whiteSpace: 'nowrap'
			                } ,
			                domProps: {
                                title: params.row.resInfo
                            }
				        },params.row.resInfo)
				    
				        h('a',{attrs:{href: "/monitor/downLoadFile?"+window.btoa("id="+params.row.id+"&type=resInfo"),target: '_black'}},"_下载") 
				    ]);  */
				
			} 
		}/*, {
			title : '操作',
			key : 'action',
			width : 90,
			align : 'left',
			render : function(h, params) {
				var functionList = [];
		
			/* 	//修改
				var edit = h('Button', {
					props : {
						type : 'primary',
						size : 'small',
						icon : 'edit'
					},
					style : {
						marginRight : '8px'
					},
					on : {
						click : function() {
							vm.edit(params.row);
						}
					}
				}, '修改');
				functionList.push(edit); */
				//移除
			/* 	var remove = h('Button', {
					props : {
						type : 'primary',
						size : 'small',
						icon : 'close'
					},
					style : {
						marginRight : '8px'
					},
					on : {
						click : function() {
							vm.remove(params.row.fileVersion,params.row.transTypeCode);
						}
					}
				}, '移除');
				functionList.push(remove);
		
				// 返回方法集合
				return h('div', functionList);
			}
		} */]
		
	},
	methods : {
		search : function(){
			this.pageNo = 1;
			this.loadlist(1);
		},
		empty : function(){
			vm.content = '';
			vm.transtype='';
			vm.updown = '';
			
			vm.response = '';
			vm.startTime='';
			vm.endTime='';
			
			this.pageNo = 1;
			
			$("li").removeClass("ivu-page-item-active");
			changepage(1);
		},
		//任务列表(自行实现分页)
		loadlist : function(index) {
			var page = {};
			page['pageIndex']= (index == 'undefind' ? 0: index) ;
			page['pageSize']= this.pageSize;
					
			var params = {};
		
			if(this.conten!=''){
				if(!isNaN(this.content.trim())){
					params['fileVersion'] = this.content.trim();
				}else{
					params['fileName'] = this.content.trim();
				}
			}
			
			if(this.updown!=''){
				params['fileUpdown']=parseInt(this.updown);
			}
			
			if(this.transtype!=''){
				params['transTypeCode']=parseInt(this.transtype);
			}
			if(this.response!=''){
				params['resResult']=parseInt(this.response);
			/* 	var reg = /^\d{1,2}+\D{2}/;
				var matcher = this.response.match(reg);
		
				console.log(matcher); */
/* 
				if(matcher !=''){
					//params['resResultScope']=this.response;
				}else{
					params['resResult']=parseInt(this.response);
				} */
				
			}
			
			if(this.startTime !=''){
				params['beginTime'] =  formatDate(new Date(this.startTime),'yyyy-MM-dd hh:mm:ss');
			}
			
			if(this.endTime !=''){
				params['endTime'] =  formatDate(new Date(this.endTime),'yyyy-MM-dd hh:mm:ss');
			}
			
			if(this.startTime !='' && this.endTime ==''){
				params['endTime'] = formatDate(new Date(),'yyyy-MM-dd hh:mm:ss'); 
			}else if(this.startTime =='' && this.endTime !=''){
				params['beginTime'] = formatDate(new Date(),'yyyy-MM-dd hh:mm:ss'); 
			}
			 
			
			 var conditional = {};
			 conditional['page'] = page;
			 conditional['params'] = params;
			 
			var json =  JSON.stringify(conditional);
			
			$.ajax({
				url:"../monitor/getMessageInfoList",
				type:"post",
				dataType: "json",
				contentType: 'application/json', 
				data: json,
				success: function(data) {
					vm.datalist = data.result.rows;
					vm.dataCount = data.result.total; //接口返回数据的总条目数
					if(vm.dataCount < vm.pageSize){   
                        vm.historyData   = vm.JobData
                    }else{
                        vm.historyData = vm.datalist.slice(0,self.pageSize);
                    }
				}
			});
		}, 
		/* transtypedroplist:function(){
    		$.ajax({
				url:"../monitor/loadTransTypeCodeDropList",
				type:"get",
				contentType: 'application/json', 
				success: function(data) {
						if(data.result != null){
							vm.transtypelist = data.result;
						}
				}
			});
       }, */
		 //页数变化的时候改变每一页的内容
        changepage:function(index){
			this.loadlist(index);
        },
      //修改每页显示条数时调用
        changePageSize:function(num) { 
           this.pageSize = num;
           this.changepage(1);
       }, 
       changtranstypelist:function(value){
    	   vm.transtype=value;
       },
       changupdownlist:function(value){
    	   vm.updown = value;
    	   if(value == 0){
    		   vm.transtypelist = [
    			   {"id":"1","value":"原始交易①"},
    			   {"id":"2","value":"ETC刷卡交易"},
    			   {"id":"3","value":"原始交易②"},
    			   {"id":"4","value":"原始交易③"},
    			   {"id":"5","value":"原始交易④"},
    			   {"id":"12","value":"其他交易①"},
    			   {"id":"13","value":"其他交易②"},
    			   {"id":"14","value":"其他冲正交易"},
    			   {"id":"31","value":"跨省刷卡交易"},
    			   {"id":"32","value":"跨省其他交易"},
    			   {"id":"33","value":"省内门架交易"},
    			   {"id":"34","value":"省内刷卡交易"},
    			   {"id":"35","value":"省内其他交易"}
    			   ];
    	   }else{
    		   vm.transtypelist = [
    			   {"id":"6","value":"记账"},
    			   {"id":"7","value":"争议处理结果"},
    			   {"id":"8","value":"清分结算结果"},
    			   {"id":"9","value":"清分结算结果(非ETC)"},
    			   {"id":"10","value":"省域拆分 - ETC"},
    			   {"id":"11","value":"省域拆分 - 现金"},
    			   {"id":"14","value":"其他冲正交易"},
    			   {"id":"15","value":"交易退费消息"},
    			   {"id":"16","value":"交易补交消息"},
    			   {"id":"17","value":"移动支付长款"},
    			   {"id":"18","value":"清分结算结果(退费补交)"},
    			   {"id":"19","value":"移动支付交易争议"}
    			   ]  
    	   }
       },
       changresponselist:function(value){
    	   vm.respons = value;
       },
       onStartTimeChange:function(startTime, type) {
           this.endTimeOption = {
               disabledDate(endTime) {
                   return endTime < new Date(startTime) || endTime > Date.now();
               }
           };
       },
       onEndTimeChange:function(endTime, type) {
           this.startTimeOption = {
               disabledDate(startTime) {
                   return startTime > new Date(endTime) || startTime > Date.now();
               }
           };
       },
		edit : function(quartz){
			dialogOpen({
				title: '修改',
				url: 'task/add.shtml',
				//屏幕小 滚动条显示
				scroll : true,
				width: '450px',
				height: '450px',
				success : function(iframeId){
					top.frames[iframeId].vm.formQuartz = quartz;
				},
				yes : function(iframeId) {
					top.frames[iframeId].vm.acceptClick();
				},
			});
		},
		//移除任务
		remove : function(jobName,jobGroup){
			var that = this;
			top.layer.confirm('确定要移除任务吗？', {btn: ['确定','取消']}, function(){
				$.ajax({
					url:"../job/remove",
					type:"post",
					data:{'time':(new Date()).toString(),"jobName":jobName,'jobGroup':jobGroup},
					success: function(result) {
						if(result.code=="0"){
							top.layer.msg('任务移除成功', {icon: 1});
							window.setTimeout(that.loadlist(),1500); 
						}
					}
				});
			});
		}
	},
	created : function() {
		 this.loadlist();
        // this.changepage(1);
         /* this.transtypedroplist(); */
	}
})

</script>
</body>
</html>